<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var options = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
  };
  var dataSourcePromise = viewer.dataSources.add(
    Cesium.KmlDataSource.load("/cesiumData/mockData/kml/facilities/facilities.kml", options)
  );
  dataSourcePromise.then(function (dataSource) {
    var pixelRange = 15;
    var minimumClusterSize = 3;
    var enabled = true;

    dataSource.clustering.enabled = enabled;
    dataSource.clustering.pixelRange = pixelRange; // 扩展屏幕空间边界框的像素范围
    dataSource.clustering.minimumClusterSize = minimumClusterSize; // 可以聚合的最小屏幕空间对象

    var removeListener;

    var pinBuilder = new Cesium.PinBuilder();
    var pin50 = pinBuilder.fromText("50+", Cesium.Color.RED, 48).toDataURL();
    var pin40 = pinBuilder.fromText("40+", Cesium.Color.ORANGE, 48).toDataURL();
    var pin30 = pinBuilder.fromText("30+", Cesium.Color.YELLOW, 48).toDataURL();
    var pin20 = pinBuilder.fromText("20+", Cesium.Color.GREEN, 48).toDataURL();
    var pin10 = pinBuilder.fromText("10+", Cesium.Color.BLUE, 48).toDataURL();

    var singleDigitPins = new Array(8);
    for (var i = 0; i < singleDigitPins.length; ++i) {
      singleDigitPins[i] = pinBuilder
        .fromText("" + (i + 2), Cesium.Color.VIOLET, 48)
        .toDataURL();
    }

    function customStyle() {
      if (Cesium.defined(removeListener)) {
        removeListener();
        removeListener = undefined;
      } else {
        removeListener = dataSource.clustering.clusterEvent.addEventListener(
          function (clusteredEntities, cluster) {
            cluster.label.show = false;
            cluster.billboard.show = true;
            cluster.billboard.id = cluster.label.id;
            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

            if (clusteredEntities.length >= 50) {
              cluster.billboard.image = pin50;
            } else if (clusteredEntities.length >= 40) {
              cluster.billboard.image = pin40;
            } else if (clusteredEntities.length >= 30) {
              cluster.billboard.image = pin30;
            } else if (clusteredEntities.length >= 20) {
              cluster.billboard.image = pin20;
            } else if (clusteredEntities.length >= 10) {
              cluster.billboard.image = pin10;
            } else {
              cluster.billboard.image =
                singleDigitPins[clusteredEntities.length - 2];
            }
          }
        );
      }

      // force a re-cluster with the new styling
      var pixelRange = dataSource.clustering.pixelRange;
      dataSource.clustering.pixelRange = 0;
      dataSource.clustering.pixelRange = pixelRange;
    }

    // start with custom style
    customStyle();

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      var pickedLabel = viewer.scene.pick(movement.position);
      if (Cesium.defined(pickedLabel)) {
        var ids = pickedLabel.id;
        if (Array.isArray(ids)) {
          for (var i = 0; i < ids.length; ++i) {
            ids[i].billboard.color = Cesium.Color.RED;
          }
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  });
  //Sandcastle_End
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
